<template>
	<view class="home_page">
		
		<puplic-nav titleTxt="首页" :flag="isFlag" @update:puplicNavHeight='getPuplicNavHeight' />
		
		<view class="re fs0">
			<view class="search_area">
				<image src="@/static/images/icon_search.png" class="search_img"></image>
				<view class="">请输入您想要搜索的问题</view>
			</view>
			<image src="@/static/images/banner_01.png" class="wp100 vt" mode="widthFix"></image>
		</view>
		
		<view class="home_content_box">
			
			<view class="filter_box" :style="`top: ${stickyTop}px`">
				<view class="filter_list">
					
					<view class="active item_filter">
						<view class="filter_text">
							<view class="txt_1">分类</view>
						</view>
						<image src="@/static/images/icon_arw_1.png" class="icon_arw_bottom"></image>
					</view>
					
					<view class="item_filter">
						<view class="filter_text">
							<view class="txt_1">分类</view>
						</view>
						<image src="@/static/images/icon_arw_1.png" class="icon_arw_bottom"></image>
					</view>
					
					<view class="item_filter">
						<view class="filter_text">
							<view class="txt_1">分类</view>
						</view>
						<image src="@/static/images/icon_arw_1.png" class="icon_arw_bottom"></image>
					</view>
					
					<view class="item_filter">
						<view class="filter_text">
							<view class="txt_1">分类</view>
						</view>
						<image src="@/static/images/icon_arw_1.png" class="icon_arw_bottom"></image>
					</view>
					
				</view>
				
			</view>
			
			<view class="card_list">
				<view class="item_card" v-for="(item, index) in cardData" :key="item.id">
					<view class="flex_box">
						<view class="re"><image src="@/static/images/img_1.png" class="card_left_img"></image></view>
						<view class="item ov">
							<view class="re hp100 df jcsb fldc pt10 pb10">
								<view class="flex_box aic">
									<view class="item ov">
										<view class="fs28 fwb cor_333 fwb clamp_1">{{ item.title }}</view>
									</view>
									<view class="df aic">
										<view class="dot_1" v-if="item.status === 0"></view>
										<view class="dot_2" v-if="item.status === 1"></view>
										<view class="fs24 cor_333" v-if="item.status === 0">有货</view>
										<view class="fs24 cor_333" v-if="item.status === 1">售空</view>
									</view>
								</view>
								<view class="df fw">
									<view class="label_box" v-for="(la, i) in item.labelList" :key="la.id">{{la.name}}</view>
								</view>
								<view class="df">
									<view class="fl_sel_box_1" v-if="item.fSel === 0">
										<image src="@/static/images/icon_home_fl_1.png" class="icon_size"></image>
										<view class="">回收中</view>
									</view>
									<view class="fl_sel_box_2" v-if="item.fSel === 1">
										<image src="@/static/images/icon_home_fl_2.png" class="icon_size"></image>
										<view class="">暂不回收</view>
									</view>
									<view class="fl_sel_box_3" v-if="item.fSel === 2">
										<image src="@/static/images/icon_home_fl_3.png" class="icon_size"></image>
										<view class="">不收别家</view>
									</view>
									<view class="fl_sel_box_4" v-if="item.fSel === 3">
										<image src="@/static/images/icon_home_fl_4.png" class="icon_size"></image>
										<view class="">2023年5月1日发售</view>
									</view>
								</view>
								<view class="fs24 fwb cor_F52">￥{{item.num}}/份</view>
								
								<view class="buy_now_btn" v-if="item.status !== 1">立即抢购</view>
								
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
		
	</view> <!-- home_page -->


</template>

<script setup>
	
	import {ref, reactive} from 'vue';
	import { onLoad, onShow, onPageScroll } from "@dcloudio/uni-app";
	import PuplicNav from '@/components/puplicNav/index.vue';

	const stickyTop = ref(0);
	const isFlag = ref(false); //控制自定义导航栏背景色
	
	const cardData = ref([
		{ id: 1, title: '塞尔达 荒野之息', status: 0, labelList:[{id: 'la_1', name: '热门'},{id: 'la_2', name: '中文'},{id: 'la_3', name: '冒险'}], fSel: 0,  num: 100  },
		{ id: 2, title: '塞尔达 荒野之息', status: 1, labelList:[{id: 'la_1', name: '热门'},{id: 'la_2', name: '中文'},{id: 'la_3', name: '冒险'}], fSel: 1,  num: 100  },
		{ id: 3, title: '塞尔达 荒野之息', status: 1, labelList:[{id: 'la_1', name: '热门'},{id: 'la_2', name: '中文'},{id: 'la_3', name: '冒险'}], fSel: 3,  num: 100  },
		{ id: 4, title: '塞尔达 荒野之息', status: 0, labelList:[{id: 'la_1', name: '热门'},{id: 'la_2', name: '中文'},{id: 'la_3', name: '冒险'}], fSel: 2,  num: 100  },
		{ id: 5, title: '塞尔达 荒野之息', status: 0, labelList:[{id: 'la_1', name: '热门'},{id: 'la_2', name: '中文'},{id: 'la_3', name: '冒险'}], fSel: 0,  num: 100  },
		{ id: 6, title: '塞尔达 荒野之息', status: 0, labelList:[{id: 'la_1', name: '热门'},{id: 'la_2', name: '中文'},{id: 'la_3', name: '冒险'}], fSel: 0,  num: 100  },
		{ id: 7, title: '塞尔达 荒野之息', status: 1, labelList:[{id: 'la_1', name: '热门'},{id: 'la_2', name: '中文'},{id: 'la_3', name: '冒险'}], fSel: 1,  num: 100  },
		{ id: 8, title: '塞尔达 荒野之息', status: 1, labelList:[{id: 'la_1', name: '热门'},{id: 'la_2', name: '中文'},{id: 'la_3', name: '冒险'}], fSel: 3,  num: 100  },
		{ id: 9, title: '塞尔达 荒野之息', status: 0, labelList:[{id: 'la_1', name: '热门'},{id: 'la_2', name: '中文'},{id: 'la_3', name: '冒险'}], fSel: 2,  num: 100  },
		{ id: 10, title: '塞尔达 荒野之息', status: 0, labelList:[{id: 'la_1', name: '热门'},{id: 'la_2', name: '中文'},{id: 'la_3', name: '冒险'}], fSel: 0,  num: 100  },
		
	])
	
	const getPuplicNavHeight = (val) => {
		stickyTop.value = val;
	};
	
	onPageScroll((e) => {
		if(e.scrollTop >= 80) {
			isFlag.value = true;
		}else {
			isFlag.value = false;
		}
	});
	
</script>

<style lang="scss" scoped>
	
	page { background: #fff; }
	
	.home_page {
		position: relative;
		.search_area {
			position: absolute;
			left: 24rpx;
			bottom: 40rpx;
			padding: 0 24rpx;
			display: flex;
			align-items: center;
			width: 446rpx;
			height: 84rpx;
			font-size: 24rpx;
			color: #333;
			background: rgba(255, 255, 255, .8);
			border: 1px solid rgba(245, 34, 15, 1);
			border-radius: 42rpx;
			.search_img {
				position: relative;
				width: 32rpx;
				height: 32rpx;
				margin-right: 12rpx;
			}
		}
		.home_content_box {
			position: relative;
			
			padding: 10rpx 32rpx 30rpx;
			border-radius: 26rpx;
			background: #fff;
			margin-top: -20rpx;
			
			.filter_box {
				position: sticky;
				top: 0;
				left: 0;
				width: 100%;
				padding: 30rpx 0;
				background: #fff;
				z-index: 5;
				.filter_list {
					position: relative;
					display: flex;
					align-items: center;
					justify-content: space-around;
					.item_filter {
						position: relative;
						display: flex;
						align-items: center;
						.filter_text {
							position: relative;
							margin-right: 5rpx;
							.txt_1 {
								position: relative;
								padding: 0 4rpx;
								font-size: 28rpx;
								color: #666666;
								z-index: 2;
							}
							&::after {
								content: "";
								display: none;
								position: absolute;
								bottom:4rpx;
								left: 0;
								width: 100%;
								height: 16rpx;
								background: #F5220F;
								z-index: 1;
							}
						}
						.icon_arw_bottom {
							position: relative;
							width: 16rpx;
							height: 16rpx;
						}
						&.active .txt_1 {
							font-weight: bold;
							color: #333;
						}
						
						&.active .filter_text {
							&::after { display: block; }
						}
					}
				}
			}
			.card_list {
				position: relative;
				.item_card {
					position: relative;
					padding-right: 20rpx;
					background: #FFFAFA;
					border: 2rpx solid #F7F7F7;
					border-radius: 16rpx;
					margin-top: 16rpx;
					.buy_now_btn {
						position: absolute;
						right: 0;
						bottom: 16rpx;
						width: 120rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						font-size: 20rpx;
						color: #fff;
						background: url(@/static/images/icon_btn_bg_1.png) no-repeat;
						background-size: 120rpx 60rpx;
						z-index: 2;
					}
					.card_left_img {
						position: relative;
						width: 312rpx;
						height: 200rpx;
						vertical-align: middle;
						margin-right: 20rpx;
					}
					.dot_1,.dot_2 {
						position: relative;
						display: block;
						width: 10rpx;
						height: 10rpx;
						border-radius: 50%;
						margin-right: 6rpx;
					}
					.dot_1 { background: #73F088; }
					.dot_2 { background: #666666; }
					.label_box {
						position: relative;
						display: flex;
						align-items: center;
						padding: 0 10rpx;
						height: 32rpx;
						font-size: 22rpx;
						color: #999;
						border: 2rpx solid #999;
						border-radius: 8rpx;
						margin-right: 8rpx;
					}
					.fl_sel_box_1,.fl_sel_box_2,.fl_sel_box_3,.fl_sel_box_4 {
						position: relative;
						padding: 0 12rpx;
						height: 34rpx;
						display: flex;
						align-items: center;
						font-size: 20rpx;
						border-radius: 8rpx;
						.icon_size {
							position: relative;
							width: 24rpx;
							height: 24rpx;
							margin-right: 4rpx;
						}
					}
					
					.fl_sel_box_1 {
						color: #DB407B;
						background: #FFDBED;
					}
					.fl_sel_box_2 {
						color: #9F73E6;
						background: #EACDFA;
					}
					.fl_sel_box_3 {
						color: #D97D2E;
						background: #FFE6B5;
					}
					.fl_sel_box_4 {
						color: #5543FE;
						background: #CCD9FF;
					}
				}
			}
		}
	}

</style>